<template>
    <div>
        <el-input v-model="selectEmail" placeholder="请输入文件名" style="width: 70%;"></el-input>
        <el-button type="primary" plain icon="el-icon-search" @click="getAllShares"></el-button>
        <div style="height: 500px; overflow-y: auto;">
        <el-table :data="tableData" border style="width: 100%" height=70vh>
            <el-table-column prop="name" label="文件名"></el-table-column>
            <el-table-column prop="shareUserName" label="分享人"></el-table-column>
            <el-table-column prop="size" label="大小"></el-table-column>
            <el-table-column prop="expireTime" label="过期时间"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="success" size="small" :disabled="scope.row.shareUserName !== sharePlaceholder"
                        @click="handleGetShareUserName(scope.row)">查看分享人</el-button>
                    <el-button type="danger" size="small" @click="handleDelete(scope.row.shareId)">取消分享</el-button>
                </template>
            </el-table-column>

        </el-table>
    </div>
    </div>
</template>
  
<script>
import MGTAPI from '../../api/management';

export default {
    data() {
        return {
            tableData: [], // 分享数据列表
            selectEmail: '',
            sharePlaceholder: '***', // 分享人姓名的默认占位符
        };
    },

    methods: {
        getAllShares() {
            MGTAPI.getSharesListApi().then(res => {
                console.log(res)
                const shares = res.data.data || [];
                // 将所有的分享人姓名都设置为默认值
                this.tableData = shares.map(share => ({
                    ...share,
                    shareUserName: this.sharePlaceholder,
                }));
            }).catch(error => {
                this.$message.error(error)
            });
        },
        handleDelete(shareId) {
            let params = new URLSearchParams();
            params.append('shareId', shareId);
            MGTAPI.deleteShare(params).then(res => {
                if(res.data.code){
                    this.$message.success("取消分享成功!");
                    this.getAllShares();
                }else{
                    this.$message.error(res.data.msg)
                }
            }).catch(error => {
                this.$message.error(error)
            });
        },
        async handleGetShareUserName(row) {
            const shareId = row.shareId;
            // 将操作按钮设置成不可点击状态
            row.disabled = true;
            try {
                let params = new URLSearchParams();
                params.append('shareId', shareId);
                const response = await MGTAPI.getShareUserInfo(params);
                const shareUserName = response.data.data;
                // 查找对应的表格行，将分享人名称更新
                this.tableData.find(item => item.shareId === shareId).shareUserName = shareUserName;
            } catch (error) {
                console.error(error);
                this.$message.error('获取分享人信息失败');
            } finally {
                // 将操作按钮重新设置为可点击状态
                row.disabled = false;
            }
        },

    },

    mounted() {
        this.getAllShares();
    },
};
</script>
  
<style scoped>
.el-table {
    height: 80%;
    /* 设置表格高度为父容器的 80% */
    overflow-y: auto;
    /* 设置纵向滚动条 */
}

/* 添加行鼠标悬停样式 */
.el-table .el-table__row:hover {
    background-color: #f5f7fa;
}

/* 设置表格头背景色 */
.el-table__header {
    background-color: #f5f7fa;
    color: #333;
    font-weight: bold;
}

/* 设置表格列宽度 */
.el-table-column--small {
    width: 100px;
}

.el-table-column--medium {
    width: 200px;
}

.el-table-column--large {
    width: 300px;
}
</style>
  